<template>
  <el-dialog
    title="详情"
    :close-on-click-modal="false"
    append-to-body
    :visible.sync="visible"
    class="jsbos-dialog jsbos-dialog_center"
    lock-scroll
    width="600px"
  >
    <el-row :gutter="15" class="">
      <el-form
        ref="elForm"
        :model="dataForm"
        size="small"
        label-width="100px"
        label-position="right"
      >
        <template v-if="!loading">
          <el-col :span="24">
            <el-form-item label="类型" prop="category">
              <p>{{ dataForm.category }}</p>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="名称" prop="fullName">
              <p>{{ dataForm.fullName }}</p>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="编码" prop="enCode">
              <p>{{ dataForm.enCode }}</p>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="状态" prop="enabledMark">
              <p>{{ dataForm.enabledMark }}</p>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label-width="0">
              <div class="jsbos-common-title">
                <h2>关键词</h2>
              </div>
              <el-table :data="dataForm.mcbusinesskeywordList" size="mini">
                <el-table-column
                  type="index"
                  width="50"
                  label="序号"
                  :align="'center'"
                />
                <el-table-column prop="fullName" label="名称">
                  <template slot-scope="scope">
                    <p>{{ scope.row.fullName }}</p>
                  </template>
                </el-table-column>
                <el-table-column prop="enCode" label="编码">
                  <template slot-scope="scope">
                    <p>{{ scope.row.enCode }}</p>
                  </template>
                </el-table-column>
                <el-table-column prop="example" label="示例">
                  <template slot-scope="scope">
                    <p>{{ scope.row.example }}</p>
                  </template>
                </el-table-column>
              </el-table>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="描述" prop="description">
              <p>{{ dataForm.description }}</p>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="创建用户" prop="creatorUserId">
              <p>{{ dataForm.creatorUserId }}</p>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="创建时间" prop="creatorTime">
              <p>{{ dataForm.creatorTime }}</p>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="修改用户" prop="lastModifyUserId">
              <p>{{ dataForm.lastModifyUserId }}</p>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="修改时间" prop="lastModifyTime">
              <p>{{ dataForm.lastModifyTime }}</p>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="删除用户" prop="deleteUserId">
              <p>{{ dataForm.deleteUserId }}</p>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="删除时间" prop="deleteTime">
              <p>{{ dataForm.deleteTime }}</p>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="有效标志" prop="deleteMark">
              <p>{{ dataForm.deleteMark | dynamicText(deleteMarkOptions) }}</p>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="所属公司" prop="companyId">
              <p>{{ dataForm.companyId }}</p>
            </el-form-item>
          </el-col>
        </template>
      </el-form>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false"> 取 消</el-button>
    </span>
  </el-dialog>
</template>
<script>
import request from "@/utils/request";
import PrintBrowse from "@/components/print-browse";
import jsbos from "@/utils/jsbos";
export default {
  components: { PrintBrowse },
  props: [],
  data() {
    return {
      visible: false,
      loading: false,
      printBrowseVisible: false,
      printId: "",
      dataForm: {
        id: "",
        category: "textmsg",
        fullName: "",
        enCode: "",
        enabledMark: 1,
        description: "",
        creatorUserId: "",
        creatorTime: "",
        lastModifyUserId: "",
        lastModifyTime: "",
        deleteUserId: "",
        deleteTime: "",
        deleteMark: "",
        companyId: [],
        mcbusinesskeywordList: [],
      },
      deleteMarkOptions: [],
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    dataInfo(dataAll) {
      let _dataAll = dataAll;
      for (let i = 0; i < _dataAll.mcbusinesskeywordList.length; i++) {
        var _list = _dataAll.mcbusinesskeywordList[i];
      }
      this.dataForm = _dataAll;
    },

    init(id) {
      this.dataForm.id = id || 0;
      this.visible = true;
      this.$nextTick(() => {
        if (this.dataForm.id) {
          this.loading = true;
          request({
            url: "/api/example/McBusiness/detail/" + this.dataForm.id,
            method: "get",
          }).then((res) => {
            this.dataInfo(res.data);
            this.loading = false;
          });
        }
      });
    },
  },
};
</script>
